<template>
  <view class="container">
    <!-- 返回按钮 -->
    <view class="header">
<!--      <view class="return-btn" @click="goBack">-->
<!--        <image src="/static/logo/返回.png" mode="widthFix" class="return-icon"></image>-->
<!--      </view>-->
      <text class="title">青城前山门票预订</text>
    </view>

    <!-- 票务信息 -->
    <view class="ticket-info">
      <text class="ticket-name">青城前山成人票</text>
      <text class="ticket-price">￥80</text>
    </view>

    <!-- 日期选择 -->
    <view class="section">
      <text class="section-title">选择游玩日期</text>
      <view class="date-selector">
        <view class="date-item" :class="{selected: selectedDate === 0}" @click="selectDate(0)">
          <text>05-28</text>
          <text>星期三</text>
        </view>
        <view class="date-item selected" :class="{selected: selectedDate === 1}" @click="selectDate(1)">
          <text>05-29</text>
          <text>星期四</text>
        </view>
        <view class="date-item" :class="{selected: selectedDate === 2}" @click="selectDate(2)">
          <text>05-30</text>
          <text>星期五</text>
        </view>
        <view class="more-dates">
          <text>更多></text>
        </view>
      </view>
    </view>

    <!-- 入园方式 -->
    <view class="section">
      <text class="section-title">入园方式</text>
      <view class="entry-method">
        <text>刷身份证入园</text>
      </view>
    </view>

    <!-- 游客信息 -->
    <view class="section">
      <text class="section-title">选择常用游客</text>
      <view class="visitor-info">
        <view class="input-item">
          <text class="required">★</text>
          <text class="label">游客1：</text>
          <input type="text" placeholder="请输入游客姓名(必填)" class="input-field" />
        </view>
        <view class="input-item">
          <text class="label">证件类型：</text>
          <text>身份证</text>
        </view>
        <view class="input-item">
          <text class="required">★</text>
          <text class="label">身份证：</text>
          <input type="text" placeholder="请填写身份证(必填)" class="input-field" />
        </view>
        <view class="add-visitor">
          <text>+添加游客</text>
        </view>
      </view>
    </view>


    <!-- 下一步按钮 -->
    <view class="next-btn" @click="goToNext">
      <text>下一步</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: 1 // 默认选中5月29日
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    selectDate(index) {
      this.selectedDate = index;
    },
    goToNext() {
      uni.redirectTo({
        url: '/pages/buyorder/buyorder'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  position: relative;
}

.return-btn {
  width: 40rpx;
  height: 40rpx;
}

.return-icon {
  width: 100%;
  height: 100%;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-left: 20rpx;
}

.ticket-info {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ticket-name {
  font-size: 32rpx;
  font-weight: bold;
}

.ticket-price {
  font-size: 36rpx;
  color: #ff4d4f;
  font-weight: bold;
}

.section {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

.date-selector {
  display: flex;
  justify-content: space-between;
}

.date-item {
  flex: 1;
  text-align: center;
  padding: 15rpx 0;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  margin-right: 10rpx;

  &.selected {
    border-color: #1890ff;
    background-color: #e6f7ff;
    color: #1890ff;
  }

  &:last-child {
    margin-right: 0;
  }
}

.more-dates {
  width: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1890ff;
}

.entry-method {
  color: #666;
  font-size: 28rpx;
}

.input-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  font-size: 28rpx;
}

.required {
  color: #ff4d4f;
  margin-right: 5rpx;
}

.label {
  color: #666;
  margin-right: 10rpx;
}

.input-field {
  flex: 1;
  border-bottom: 1rpx solid #eee;
  padding: 10rpx 0;
}

.add-visitor {
  color: #1890ff;
  text-align: center;
  padding: 20rpx 0;
  border-top: 1rpx dashed #eee;
  margin-top: 10rpx;
}

.next-btn {
  position: fixed;
  bottom: 40rpx;
  left: 20rpx;
  right: 20rpx;
  background-color: #1890ff;
  color: #fff;
  text-align: center;
  padding: 25rpx 0;
  border-radius: 50rpx;
  font-size: 32rpx;
}
</style>
